<template>
  <div class="content-test-popup">
    <el-button type="success" @click="handleClose">关闭TestPopup页面</el-button>
    <h2>我是ContentPage页面的popup弹窗组件</h2>
    <img src="../../assets/b.jpeg" alt="" class="b-img" />
    <h3>pinpa测试</h3>
    <span style="margin: 4px">{{ store.count }}</span>
    <el-button @click="handlePiniaAdd">测试pinia添加</el-button>
  </div>
</template>

<script setup>
import { useCounterStore } from '../store/counter' // 引入pinia 数据
const store = useCounterStore() // 获取pinia数据

const handlePiniaAdd = () => {
  store.increment()
}
const handleClose = () => {
  store.showOrHide()
}
</script>

<style lang="less" scoped>
.content-test-popup {
  width: 30vw;
  height: 80vh;
  padding: 24px;
  .b-img {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
}
</style>
